<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%response.setHeader("cache-control","public"); %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/practice/test-system.css">
    <style type="text/css">
     .backImg{
		  background-image: url('<%=path%>/static/images/logo2.png');
		  background-repeat: no-repeat;
		  background-size: 25px 25px;
		  padding-left: 30px;
		  }
    </style>
    <script src="<%=path%>/static/js/respond.js"></script>
    <script src="<%=path%>/static/js/practice/textarea.js"></script>
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%=path%>/static/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
    </script>
    <!-- <![endif]-->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%=path%>/static/js/jquery-1.9.1.min.js'>" + "<" + "/script>");
    </script>

    <script src="<%=path%>/static/js/practice/time.js"></script>
    <script src="<%=path%>/static/js/bootstrap.min.js"></script>

</head>
<body>
<!--head begin-->
<div class="headbg position_fixed">
    <div class="container header">
        <div class="navheader">
           <div class="logo pull-left">
            <h3 class="pc_title backImg" >在线考试系统</h3>
        </div>
            <div class="nav-right">
                <span class="numc" id="nowNum">1</span>
                <span class="numtitle" id="examCount" data-val="${count}">/${count}题</span>
                <!-- Button trigger modal -->
                <div class="border-right-none"></div>
                <button type="button" class="btn btn-default btn-lg overtest" data-toggle="modal"
                        data-target="#myModal"><i class="glyphicon glyphicon-open gameover"></i><span>返回</span></button>
            </div>
        </div>
    </div>
</div>
<div class="container main">
    <c:forEach items="${mutilist}" var="question" varStatus="status">
        <div class="single-box"
                <c:if test="${status.count !=1}"> style="display: none;" </c:if>  >
            <div class="single-container">
                <div class="single-title">
                    <span class="font-title">多选题</span>
                </div>
                <div class="confirm-top">
                    <a class="btn btn-default" href="javascript:void(0)" onclick="questionsDel()" role="button">上一题</a>
                    <a id="questionsAdd" class="btn btn-info" href="javascript:void(0)" role="button">下一题</a>
                </div>
            </div>
            <div class="line"></div>
            <div class="single-main">
                <input id="questionId" type="text" style="display:none" value="${question.id}">
                <p>${status.count}. ${question.title}</p>
                <c:if test="${not empty question.picture && !(question.picture eq null) }">
                    <p><img style="width: 120px; height: 120px;" src="<%=basePath %>${question.picture}"></p>
                </c:if>
            </div>
            <div class="choose-box">
                <div class="radio">
                    <label class="choose">
                        <span></span>
                        <input type="checkbox" name="optionsRadios1" id="${question.id}a" value="${question.a}">
                        <c:choose>
                            <c:when test="${not empty question.apic && !(question.apic eq null) }">
                                <p><span>A</span>&nbsp;${question.a}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.apic}">
                            </c:when>
                            <c:otherwise>
                                <p><span>A</span>&nbsp;${question.a}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="radio">
                    <label class="choose">
                        <span></span>
                        <input type="checkbox" name="optionsRadios1" id="${question.id}b" value="${question.b}">
                        <c:choose>
                            <c:when test="${not empty question.bpic && !(question.bpic eq null) }">
                                <p><span>B</span>&nbsp;${question.b}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.bpic }">
                            </c:when>
                            <c:otherwise>
                                <p><span>B</span>&nbsp;${question.b}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="radio">
                    <label class="choose">
                        <span></span>
                        <input type="checkbox" name="optionsRadios1" id="${question.id}c" value="${question.c}">
                        <c:choose>
                            <c:when test="${not empty question.cpic && !(question.cpic eq null) }">
                                <p><span>C</span>&nbsp;${question.c}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.cpic }">
                            </c:when>
                            <c:otherwise>
                                <p><span>C</span>&nbsp;${question.c}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="radio">
                    <label class="choose">
                        <span></span>
                        <input type="checkbox" name="optionsRadios1" id="${question.id}d" value="${question.d}">
                        <c:choose>
                            <c:when test="${not empty question.dpic && !(question.dpic eq null) }">
                                <p><span>D</span>&nbsp;${question.d}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.dpic }">
                            </c:when>
                            <c:otherwise>
                                <p><span>D</span>&nbsp;${question.d}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="answer-box" style="padding:5px 0;display: none;" >
                    <span>正确答案：<b></b></span>
                </div>
            </div>
        </div>
    </c:forEach>
</div>

<!--body end-->

<!--footer begin-->
<!--footer end-->
</body>
<!-- 提交弹出框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog mtk-box" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-tip" id="myModalTip">考试提示：</h4>
            </div>
            <div class="modal-body bigbox">
                <h3 class="text-over">是否结束练习</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a type="button" class="btn btn-info" href="<%=path%>/sys/trainee"><i class="glyphicon glyphicon-open"></i>确认返回</a>
            </div>
        </div>
    </div>
</div>
<!-- 没选题 -->
<div class="modal fade" id="not" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">未选择答案</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 没有题 -->
<div class="modal fade" id="no" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">后面没有题了</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script src="<%=path%>/static/js/practice/test-system.js"></script>
<script type="text/javascript">
    function questionsDel() {

        if (num > 0) {
            num = num - 1;
            for (var i = 0; i < nums; i++) {
                if (num == i) {
                    $(".main").children().eq(num).css("display", "block");
                } else {
                    $(".main").children().eq(i).css("display", "none");
                }
            }
        }
        footer_position();
        var nowNum = $("#nowNum").html()
        if(nowNum==1){
            nowNum=1;
        }else {
            $("#nowNum").html(parseInt(nowNum)-1);
        }
    }
    //以前呢个方法不好用 复制过来一个
    function questionsAdd() {

        if (num < nums - 1) {
            num = num + 1;
            for (var i = 0; i < nums; i++) {
                if (num == i) {
                    $(".main").children().eq(num).css("display", "block");
                } else {
                    $(".main").children().eq(i).css("display", "none");
                }
            }
        }
        footer_position();
        var count = $("#examCount").data("val");
       var nowNum = $("#nowNum").html()
        if(nowNum==count){
            $('#no').modal('show')
        }else {
            $("#nowNum").html(parseInt(nowNum)+1);
        }


    }
    var boolean = false;
    $(function () {

        $("a[id=questionsAdd]").click(function () {
            var answer = false;
            var array = [];
            if(boolean){
                questionsAdd();
                boolean=false;
            }else {
                //$input.val 取的是id
                var $input = $(this).parent().parent().next().next().find("input");
                var id = $input.val();
                var $a = $input.parent().next().find("div").eq(0).find("input");
                var $b = $input.parent().next().find("div").eq(1).find("input");
                var $c = $input.parent().next().find("div").eq(2).find("input");
                var $d = $input.parent().next().find("div").eq(3).find("input");
                var $p = $input.parent().next().find("div").last().find("span").find("b");
                //judge 是ajax 返回的是数据库答案
                var data = judge(id);
                //判断值是否存在数组中 存在答案添加
                var bool = false;
                if($a.is(':checked')){
                    bool = true;
                }
                if($b.is(':checked')){
                    bool = true;
                }
                if($c.is(':checked')){
                    bool = true;
                }
                if($d.is(':checked')){
                    bool = true;
                }
                if(!bool){
                    $('#not').modal('show')
                    return ;
                }
                if(data.includes("A")){
                    $a.next().css("color","red");
                }
                if(data.includes("B")){
                    $b.next().css("color","red");
                }
                if($c.val()!=null){
                    if(data.includes("C")){
                        $c.next().css("color","red");
                    }
                }
                if($d.val()!=null){
                    if(data.includes("D")){
                        $d.next().css("color","red");
                    }
                }
                //先吧答案全变成红色 在判断选择是否是答案 在变绿
                //判断是否选中
                if($a.is(':checked')){
                    $p.parent().parent().css("display","block");
                    array += "A";
                    if(data.includes("A")){
                        $a.next().css("color","#4c4ca6");
                    }
                    boolean=true;
                }
                if($b.is(':checked')){
                    $p.parent().parent().css("display","block");
                    array += "B";
                    if(data.includes("B")){
                        $b.next().css("color","#4c4ca6");
                    }
                    boolean=true;
                }
                if($c.is(':checked')){
                    $p.parent().parent().css("display","block");
                    array += "C";
                    if($c.val()!=null){
                        if(data.includes("C")){
                            $c.next().css("color","#4c4ca6");
                        }
                    }
                    boolean=true;
                }
                if($d.is(':checked')){
                    $p.parent().parent().css("display","block");
                    array += "D";
                    if($d.val()!=null){
                        if(data.includes("D")){
                            $d.next().css("color","#4c4ca6");
                        }
                    }
                    boolean=true;
                }
                $p.html(data);
                var question_id = $input.val();
                //存入错题ajax
                if(array!=data){
                    $.ajax({
                        url:"<%=path%>/practice/wrongAjax",
                        data:{question_id:question_id,myoption:array},
                        type:"post",
                        success:function () {

                        }
                    })
                }

            }
        })
        function judge(id){
            //ajax 方法查正确答案
            var result ;
            $.ajax({
                url:"<%=path%>/practice/judgeAjax",
                data:{id:id},
                type:"post",
                async:false,
                success:function (data) {
                    result = data.answer;
                }
            })
            return result;
        }


        $("[data-toggle='popover']").popover();

    });


    var examid = '${examid}';
    var paperid = '${paperid}';
    var userid = '${userid}';

    function answerDetail() {
        var examid = '${examid}';
        var paperid = '${paperid}';
        var userid = '${userid}';
        $.ajax({
            url: '<%=basePath%>examCenter/answerDetail/',
            data: {
                exam_id: examid,
                paper_id: paperid,
                user_id: userid
            },
            dataType: "json",
            success: function (data) {
                var arr = data;
                var num = 0;
                var singleDiv = "";
                var judgeDiv = "";
                var mutiDiv = "";
                var numNow = $("#nowNum").text();
                numNow = numNow.substr(0, numNow.length - 1);
                for (var i = 0; i < data[0].singleans.length; i++) {
                    num = num + 1;
                    if (numNow == num) {
                        singleDiv += "<a class='btn btn-primary' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                    } else {
                        if (data[0].singleans[i].answer == null || data[0].singleans[i].answer == "") {
                            singleDiv += "<a class='btn btn-default' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        } else {
                            singleDiv += "<a class='btn btn-success' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        }
                    }
                }
                for (var i = 0; i < data[0].judgeans.length; i++) {
                    num = num + 1;
                    if (numNow == num) {
                        judgeDiv += "<a class='btn btn-primary' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                    } else {
                        if (data[0].judgeans[i].answer == null || data[0].judgeans[i].answer == "") {
                            judgeDiv += "<a class='btn btn-default' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        } else {
                            judgeDiv += "<a class='btn btn-success' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        }
                    }
                }
                for (var i = 0; i < data[0].mutians.length; i++) {
                    num = num + 1;
                    if (numNow == num) {
                        mutiDiv += "<a class='btn btn-primary' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                    } else {
                        if (data[0].mutians[i].answer == null || data[0].mutians[i].answer == "") {
                            mutiDiv += "<a class='btn btn-default' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        } else {
                            mutiDiv += "<a class='btn btn-success' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        }
                    }
                }
                $("#singleDiv").html(singleDiv);
                $("#judgeDiv").html(judgeDiv);
                $("#mutiDiv").html(mutiDiv);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error11111");
            }
        });
    };

    function toQuestion(id) {
        num = id - 1;
        $('#dtmb').modal('hide');
        $('#nowNum').text(id + "/");
        var nums = $(".main .single-box").length;

        for (var i = 0; i < nums; i++) {

            if (i == id) {
                $(".main").children().eq(i - 1).css("display", "block");
            } else {
                $(".main").children().eq(i).css("display", "none");
            }
        }
        footer_position();
    }

    //打开模态窗口
    $('#dtmb').modal({backdrop: 'static', keyboard: false, show: false});
    $('#myModal').modal({backdrop: 'static', keyboard: false, show: false});

</script>
</html>
